<template>
  <div>
    <h2>Submit a Comment</h2>
    <form @submit.prevent="handleSubmit">
      <textarea v-model="comment" rows="4" cols="50"></textarea><br/>
      <button type="submit">Submit</button>
    </form>
    <div v-if="responseMessage" v-html="responseMessage"></div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      comment: '',
      responseMessage: ''
    };
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await axios.post('http://localhost:8000/apis/submitComment', null, {
          params: {
            comment: this.comment
          }
        });
        this.responseMessage = response.data;
      } catch (error) {
        console.error('There was an error submitting the form!', error);
      }
    }
  }
};
</script>
